<template>
  <h1>Hello Vue3</h1>
  <h2>{{ obj }}</h2>
  <h3>姓名：{{ obj.name }}</h3>
  <h3>年龄：{{ obj.age }}</h3>
  <hr />
  <h4>姓名2：{{ name }}</h4>
  <button @click="btn">改名</button>
</template>

<script>
import { reactive, toRef } from 'vue'
/* 
  目标：toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

*/
export default {
  name: 'App',
  setup() {
    console.log('setup组合API的起点')

    const obj = reactive({
      name: '男班长',
      age: 18,
    })

    const btn = () => {
      obj.name = '男班短'
    }

    // ❌ 直接把值给到了变量，失去了关联
    // const name = obj.name
    // console.log(typeof name);  // string

    // ✅ toRef 创建出来的变量，值和源对象关联的。
    const name = toRef(obj, 'name')
    console.log(typeof name) // object，是一个对象
    console.log(name) // 响应式对象，值和源对象是关联的
    console.log(name._object === obj) // true    🔔 name._object 属性为源响应式对象

    return { obj, btn, name }
  },
}
</script>

<style></style>
